<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>预约记录查询</title>

    <!-- 引入Element样式文件 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <h1>预约记录查询</h1>
    <el-button @click="getPrevious">查询以往已预约场地</el-button>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="订单id"></el-table-column>
        <el-table-column prop="userAccount" label="用户姓名"></el-table-column>
        <el-table-column prop="stadiumName" label="预约场馆名称"></el-table-column>
        <el-table-column prop="startTime" label="预约开始时间"></el-table-column>
        <el-table-column prop="endTime" label="预约结束时间"></el-table-column>
        <el-table-column prop="fantastic" label="评价"></el-table-column>
        <el-table-column label="修改评价">
            <template slot-scope="scope">
                <el-button type="primary" @click="editPraise(scope.row.id)">修改评价</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 添加修改评价的弹窗 -->
    <el-dialog :visible.sync="dialogVisible" title="修改评价">
        <p>请选择评价：</p>
        <el-radio v-model="praiseOption" label="优">优</el-radio>
        <el-radio v-model="praiseOption" label="差">差</el-radio>
        <br><br>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="confirmPraise">确认</el-button>
        </span>
    </el-dialog>
</div>

<!-- 引入Vue.js和Element.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                tableData: [],
                dialogVisible: false, // 弹窗是否显示
                id: null, // 存储订单id
                praiseOption: null, // 存储评价选项
            }
        },
        methods: {
            getPrevious() {
                axios({
                    method: "post",
                    url: "http://localhost:8080/stadium/user/getPrevious"
                }).then((data) => {
                    this.tableData = data.data;
                })
            },


            editPraise(id) {
                // 显示弹窗
                this.dialogVisible = true;

                // 将订单id存储在全局变量中
                this.id = id;

                // 清空评价选项
                this.praiseOption = null;
            },

            updatePraise() {

                axios({
                    method: "GET",
                    url: "http://localhost:8080/stadium/user/updatePraise?orderId=" + this.id + "&praiseOption=" + this.praiseOption
                }).then((data) => {
                    this.tableData = data.data;
                    // 添加以下代码
                    this.$message({
                        message: '修改成功！',
                        type: 'success'
                    });
                })
            },


            confirmPraise() {
                // 如果评价选项为空，则提示用户选择评价
                if (!this.praiseOption) {
                    this.$message({
                        message: '请选择评价！',
                        type: 'warning'
                    });
                    return;
                }

                // 隐藏弹窗
                this.dialogVisible = false;

                // 发送请求更新评价
                this.updatePraise();
            }
        }
    });
</script>
</body>
</html>
